<template>
	<view class="content">
		<view class="head" style="background-image: url('/static/image/login-login_bg.png');background-repeat: no-repeat;width: 100%;background-size: 100% 100%;">
			<view>
				<image class="imglogo" src="/static/image/logo.png" mode=""></image>
			</view>
			<view class="top_title">
				<text class="title">智助教育</text>
			</view>
		</view>
		<view class="group">
			<view class="phone">
				<i class="iconfont iconzhanghaoxinxi"></i>
				<input v-model="phone" class="input_phone" type="text" placeholder="请输入手机号" name="phone" placeholder-style="color:#999999" autocomplete="off"/>
			</view>
			<view class="password">
				<i class="iconfont iconmima1"></i>
				<input v-model="password" class="input_password" type="password" placeholder="请输入密码" name="password"
				 placeholder-style="color:#999999" autocomplete="off"/>
			</view>
			<view class="verify">
				<view class="verify_left">
					<i class="iconfont iconyanzhengma"></i>
					<input v-model="verify" class="input_verify" type="text" placeholder="请输入验证码" name="verify" placeholder-style="color:#999999" autocomplete="off"/>
				</view>
				<view class="cus_yan" @click="refresh">
					<imgcode ref="imgcode" @getValue="ChangeCode"></imgcode>
				</view>
			</view>
		</view>
		<view class="foot_group">
			<view class="radio_text_psw"  @click="show_check_box" >
				<checkbox :checked="check_box" class="check" />
				<text class="check_text">记住密码</text>
			</view>
			<button @click="check_login" class="check_login">登录</button>
			<view>
				<navigator hover-class="false" url="register" class="register">现在注册!</navigator>
				<navigator hover-class="false" url="../user/forget-pwd" class="search ">忘记密码?</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import Checker from '@/common/graceChecker.js';
	import imgcode from '@/components/imgcode.vue';
	import util from '@/common/util.js';
	export default {
		data() {
			self = this;
			return {
				phone: "",
				password: "",
				verify: "",
				check_box: false,
				k_token: '',
				Verification_key: '',
				Verification_va: ''
			}
		},
		components: {
			imgcode
		},
		onLoad() {
			this.show();
			var phone = uni.getStorageSync('phone');
			this.phone = phone;
			var password = uni.getStorageSync('password');
			this.password = password;
			if (uni.getStorageSync('token')&&uni.getStorageSync('atoken')) {
				this.$zapi.apiPost('user/currency.basic/GetUserInfo').then(res => {
					if (res.data.code == 200) {
						var provinec_id = res.data.data.provinec_id; //学校名称
						if (provinec_id == 0) {
							uni.showModal({
								title: '提示',
								content: '请完善个人资料',
								success: function(res) {
									if (res.confirm) {
										uni.redirectTo({
											url: 'means'
										});
									} else if (res.cancel) {
										return;
									}
								}
							});
						} else {
							/**
							 * 保存老师信息
							 */
							uni.setStorageSync('userInfo', res.data.data);
							uni.switchTab({
								url: '../index/index'
							});
						}
					} else {
						uni.showToast({
							title: '此账号在别处登录，建议修改密码重新登录！',
							icon: 'none'
						});
					}
				});
			}
		},
		methods: {
			refresh: function() {
				this.$refs.imgcode.refresh();
			},
			show: function() {
				var _this = this;
				setTimeout(function() {
					_this.refresh();
				}, 500);
			},
			check_login: function() {
				var _phone = uni.getStorageSync('phone');
				if(this.phone != _phone) {
					uni.clearStorageSync();
				}
				//获取验证码图片的值
				var cmverify = uni.getStorageSync('imgcode');
				//验证规则
				var rule = [{
						name: "phone",
						checkType: "phoneno",
						checkRule: this.phone,
						errorMsg: "请输入正确的手机号"
					},
					{
						name: "pwd",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "密码不能为空"
					},
					{
						name: "verify",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "验证码不能为空"
					}
				];
				//验证数据
				var data = {
					"phone": this.phone,
					"pwd": this.password,
					"verify": this.verify
				};
				var getCheck = Checker.check(data, rule);
				if (!getCheck) {
					uni.showToast({
						title: Checker.error,
						mask: false,
						duration: 1500,
						icon: 'none'
					});
					return;
				}
				//验证结束
				//处理记住密码操作
				if (this.check_box) {
					uni.setStorageSync('phone', this.phone);
					uni.setStorageSync('password', this.password);
				} else {
					uni.setStorageSync('phone', '');
					uni.setStorageSync('password', '');
				}
				//进行服务器的验证
				var datas = {
					'phone': this.phone,
					'pwd': this.password,
					'login_type': 3,
					'Verification_key': this.Verification_key,
					'Verification_val': this.verify
				};
				this.$zapi.apiPost('user/currency.user/Login', datas).then(res => {
					if (res.data.code == 200) {
						this.k_token = res.data.data.k_token;
						uni.setStorageSync('token', this.k_token);
						var datas2 = {
							'k_token': this.k_token
						}
						this.getaToken(datas2);
					} else {
						this.refresh();
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 1500
						});
					}
				});
			},
			getaToken: function(datas2) {
				var _this=this;
				uni.showLoading({
					title: '正在登录中......',
					mask: false
				});
				this.$zbapi.apiPost('login/account',datas2).then(res => {
					var data = res.data;
					uni.hideLoading();
					if (data.code == 0) {
						uni.setStorageSync('atoken', data.data.a_token)	
						_this.getUserdata(datas2);
					} else {
						uni.showToast({
							icon: 'none',
							title: data.msg
						})
					}
					
				});
			},
			getUserdata: function(datas2) {
				this.$zapi.apiPost('user/currency.basic/GetUserInfo', datas2).then(res => {
					var provinec_id = res.data.data.provinec_id; //学校名称
					if (res.data.data.users_type != 3) {
						uni.showToast({
							title: '请用家长账号登录',
							mask: false,
							duration: 1500
						});
						uni.setStorageSync('token', '');
						return;
					}
					if (provinec_id == 0) {
						uni.showModal({
							title: '提示',
							content: '请完善个人资料',
							success: function(res) {
								if (res.confirm) {
									setTimeout(function() {
										uni.redirectTo({
											url: 'means'
										});
									}, 500);
								} else if (res.cancel) {
									return;
								}
							}
						});
					} else {
						this.$zapi.apiPost('user/currency.Parents/childlist').then(res => {
							if (res.data.data.length == 0) {
								uni.showModal({
									title: '提示',
									content: '请先绑定孩子',
									success: function(res) {
										if (res.confirm) {
											setTimeout(function() {
												uni.navigateTo({
													url: '../child/child-add'
												})
											}, 500);
										} else if (res.cancel) {
											return;
										}
									}
								});
							} else {
								/* 保存学生信息 */
								uni.setStorageSync('phone', this.phone)
								uni.setStorageSync('student_info', res.data.data);
								uni.showToast({
									title: '登录成功',
									duration: 1500
								});
								setTimeout(function() {
									uni.switchTab({
										url: '../index/index'
									})
								}, 1500);
							}
						})
					}
				});
			},
			show_check_box: function() {
				this.check_box = !this.check_box;
			},
			ChangeCode(data) {
				this.Verification_key = data.key;
				this.Verification_val = data.value;
			}
		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	html {
		background-color: #FFFFFF;
	}

	.content {
		width: 100%;
		height: 100%;
		position: absolute;
		background-size: 100% 100%;
		background-color: #FFFFFF;
	}

	.head {
		padding-top: 0upx;
		text-align: center;
		width: 100%;
		height: 412upx;
	}

	.imglogo {
		width: 260upx;
		height: 260upx;
		margin-top: 80upx;
	}

	.top_title {
		margin-top: -40upx;
	}

	.title {
		font-size: 42upx;
		color: #FFFFFF;
		font-family: '微软雅黑';
	}

	.group,
	.foot_group {
		margin: 75upx 80upx 40upx;
	}

	.foot_group {
		margin-top: 0;
	}

	.iconfont {
		color: #FF9900;
		font-size: 50upx;
		margin-right: 10upx;
	}

	input,
	input::-webkit-input-placeholder {
		border-bottom: 2upx solid #E5E5E5;
		color: #999999;
		font-size: 36upx;
		width: 532upx;
		height: 68upx;
		line-height: 80upx;
		margin-top: 10upx;
	}

	input {
		color: #000000;
	}

	.phone,
	.password,
	.verify {
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
		width: 100%;
		padding-bottom: 5upx;
		padding-top: 20upx;
	}

	.input_verify {
		width: 370upx;
	}

	.verify_left {
		display: flex;
		justify-content: flex-start;
	}

	.cus_yan {
		width: 156upx;
		height: 66upx;
		border: 1px solid #707070;
		display: flex;
		justify-content: center;
		margin-top: 10upx;
	}

	.radio_text_psw {
		font-size: 30upx;
		margin-top: 8upx;
		color: #666666;
		display: flex;
		align-items: center;
	}

	.check {
		height: 50upx;
		line-height: 50upx;
		transform: scale(0.7);
	}

	.check_text {
		height: 50upx;
		line-height: 57upx;
		font-size: 30upx;
		margin-left: -10upx;
	}

	.check .wx-checkbox-input {
		margin-right: 10upx;
		-webkit-appearance: none;
		appearance: none;
		outline: 0;
		border: 2upx solid #999999;
		background-color: #FFFFFF;
		border-radius: 6upx;
		width: 22px;
		height: 22px;
		position: relative;
	}

	.check .wx-checkbox-input.wx-checkbox-input-checked {
		background-color: #FFFFFF;
		color: #666666 !important;
	}

	.check .wx-checkbox-input.wx-checkbox-input-checked:before {
		font-size: 60upx !important;
	}

	.check_login {
		margin-top: 40upx;
		width: 100%;

	}

	button {
		margin-top: 40upx;
		background: #FF9900;
		color: #ffffff;
		font-family: '宋体';
		font-size: 36upx;
		border-radius: 8upx;
		height: 80upx;
		line-height: 80upx;
	}

	button:after {
		border: none;
	}

	.register {
		margin-top: 18upx;
		float: left;
		font-size: 34upx;
		color: #666666;

	}

	.search {
		margin-top: 18upx;
		color: #666666;
		font-size: 34upx;
		float: right;
	}
</style>
